<template>
    <div class="ph-check-group"><slot></slot></div>
</template>
<script lang="ts">
import { computed, defineComponent, provide, toRef } from 'vue'
interface Opt{
    checked:boolean,
    value:string|number
}
export default defineComponent({
    props:{
        disabled:{type:Boolean,default:false},
        value:{
            type:[String,Number,Array]
        }
    },
    setup(props,{emit}) {
        const values = computed(()=>{
            if(!props.value)return []
            if(props.value instanceof Array)return props.value as Array<string|number>
            else return [props.value] as Array<string|number>
        })
        const update = (opt:Opt)=>{
            let vs:Array<string|number>= []
            if(opt.checked)vs = [opt.value,...values.value]
            else vs = values.value.filter((v:string|number)=>v!=opt.value)
            emit("change",vs)
        }
        provide("phcvalue",values)
        provide("update",update)
        provide("disabled",toRef(props,'disabled'))
    },
})
</script>
<style lang="scss">
@import '../check.scss';
</style>
